<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	            xmlns:ui="http://java.sun.com/jsf/facelets"
	            xmlns:f="http://java.sun.com/jsf/core"
	            xmlns:h="http://java.sun.com/jsf/html"
	            xmlns:p="http://primefaces.org/ui"
	            xmlns:s="http://www.suricattus.com.br/jsf/ui"
	            xmlns:sf="http://www.suricattus.com.br/jsf/fn"
	            xmlns:ec="http://www.b2cexpress.com.br/ecommerce"
	            template="/resources/layout/template.xhtml">

    <ui:define name="head">
        <!-- JavaScript -->
    </ui:define>

    <ui:define name="body">
    	<h:form>
    		
    		<p:messages />
    		
	        <div style="padding-top: 20px">
	            <p:panel header="#{labels['meproteja.cadastro.cliente.ativacao.titulo']}" footer="">
	            	<ec:field id="nome" fieldId="nomeField" label="#{labels['meproteja.cadastro.cliente.ativacao.nome']}" required="true">
						<p:inputText id="nomeField" label="#{labels['meproteja.cadastro.cliente.ativacao.nome']}" value="#{cadastrarClienteController.cliente.nome}" required="true" />
					</ec:field>
					
					<ec:field id="cpf" fieldId="cpfField" label="#{labels['meproteja.cadastro.cliente.ativacao.cpf']}" required="true">
						<p:inputMask id="cpfField" value="#{cadastrarClienteController.cliente.cpf}" required="true" label="#{labels['meproteja.cadastro.cliente.ativacao.cpf']}">
							<s:cpf />
						</p:inputMask>
					</ec:field>
					
					<ec:field id="dataNascimento" fieldId="dataNascimentoField" label="#{labels['meproteja.cadastro.cliente.ativacao.dataNascimento']}" required="true">
						<p:calendar id="dataNascimentoField" label="#{labels['meproteja.cadastro.cliente.ativacao.dataNascimento']}" pattern="dd/MM/yyyy" 
							value="#{cadastrarClienteController.cliente.dataNascimento}" showButtonPanel="true" navigator="true" required="true" />
					</ec:field>
					
					<ec:field id="email" fieldId="emailField" label="#{labels['meproteja.cadastro.cliente.ativacao.email']}" required="true">
						<p:inputText  value="#{cadastrarClienteController.cliente.email}" id="emailField" required="true" label="#{labels['meproteja.cadastro.cliente.ativacao.email']}">
							<s:email />
						</p:inputText>
					</ec:field>
					
					<ec:field id="notificaEmail" fieldId="notificaEmailField" label="#{labels['meproteja.cadastro.cliente.ativacao.notificarEmail']}" >
						<p:selectBooleanCheckbox label="#{labels['meproteja.cadastro.cliente.ativacao.notificarEmail']}" value="#{cadastrarClienteController.cliente.notificarEmail}" id="notificaEmailField" />
					</ec:field>
	                	
					<ec:field id="notificaSms" fieldId="notificaSmsField" label="#{labels['meproteja.cadastro.cliente.ativacao.notificarSms']}">
						<p:selectBooleanCheckbox label="#{labels['meproteja.cadastro.cliente.ativacao.notificarSms']}" value="#{cadastrarClienteController.cliente.notificarSMS}" id="notificaSmsField" />
					</ec:field>

		           	<ec:field id="licenca" fieldId="licencaField" label="#{labels['meproteja.cadastro.cliente.ativacao.licenca']}" required="true">
						<p:inputMask mask="mask: '********-****-****-****-************'" label="#{labels['meproteja.cadastro.cliente.ativacao.licenca']}" 
							value="#{cadastrarClienteController.licencaKey}" id="licencaField" required="true"
							converter="licencaConverter"
							validator="licencaValidator">
						</p:inputMask>
					</ec:field>

                	<ec:field id="telefone" fieldId="telefoneField" label="#{labels['meproteja.cadastro.cliente.ativacao.telefone']}" required="true">
						<p:inputMask mask="mask: '(99) 9999-9999'" label="#{labels['meproteja.cadastro.cliente.ativacao.telefone']}" value="#{cadastrarClienteController.telefoneComMascara}" id="telefoneField">
							<f:validateLength minimum="14" maximum="14" for="telefoneField" />
						</p:inputMask>
					</ec:field>
					
                	<ec:field id="telefoneAlt" fieldId="telefoneFieldAlt" label="#{labels['meproteja.cadastro.cliente.ativacao.telefone.alternativo']}" required="false">
                		<p:selectOneMenu id="tipo" value="#{cadastrarClienteController.tipoTelefoneAnternativo}" label="#{labels['meproteja.cadastro.cliente.ativacao.telefone.tipo']}" required="false">
							<f:selectItems value="#{serttusFactory.tiposTelefone}" var="tipo" itemLabel="#{tipo.descricao}" itemValue="#{tipo}" />
						</p:selectOneMenu>
						<p:inputMask mask="mask: '(99) 9999-9999'" label="#{labels['meproteja.cadastro.cliente.ativacao.telefone.alternativo']}" value="#{cadastrarClienteController.telefoneAlternativoComMascara}" id="telefoneFieldAlt">
							<f:validateLength minimum="14" maximum="14" for="telefoneFieldAlt" /> 
						</p:inputMask>
					</ec:field>
					
					<ec:field id="logradouro" fieldId="logradouroField" label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.logradouro']}" required="true">
						<p:inputText label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.logradouro']}" value="#{cadastrarClienteController.cliente.endereco.logradouro}" id="logradouroField" />
					</ec:field>
					
					<ec:field id="numero" fieldId="numeroField" label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.numero']}" required="true">
						<p:inputText label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.numero']}" value="#{cadastrarClienteController.cliente.endereco.numero}" id="numeroField" />
					</ec:field>
					
					<ec:field id="complemento" fieldId="complementoField" label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.complemento']}" required="true">
						<p:inputText label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.complemento']}" value="#{cadastrarClienteController.cliente.endereco.complemento}" id="complementoField" />
					</ec:field>
					
					<ec:field id="bairro" fieldId="bairroField" label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.bairro']}" required="true">
						<p:inputText label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.bairro']}" value="#{cadastrarClienteController.cliente.endereco.bairro}" id="bairroField" />
					</ec:field>
					
					<ec:field id="uf" fieldId="ufField" label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.uf']}" required="true">
						<p:selectOneMenu id="ufField" value="#{cadastrarClienteController.ufSelecionada}" label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.uf']}" required="true">
							<f:selectItem itemLabel="Selecione" itemDescription="Selecione" />
							<f:selectItems value="#{serttusFactory.ufs}" var="_uf" itemLabel="#{_uf}" itemValue="#{_uf}"/>
							<p:ajax event="change" update="cidadeField" listener="#{cadastrarClienteController.carregarCidades()}" />
						</p:selectOneMenu>
					</ec:field>

					<ec:field id="cidade" fieldId="cidadeField" label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.cidade']}" required="true">
						<p:selectOneMenu id="cidadeField" value="#{cadastrarClienteController.cliente.endereco.cidade}" label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.cidade']}" required="true" converter="entityConverterGeral">
							<f:selectItem itemLabel="Selecione" itemDescription="Selecione" />
							<f:selectItems value="#{cadastrarClienteController.cidades}" var="cidade" itemLabel="#{cidade.nome}" itemValue="#{cidade}"/>
						</p:selectOneMenu>
					</ec:field>
					
					<ec:field id="cep" fieldId="cepField" label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.cep']}" required="true">
						<p:inputMask id="cepField" mask="mask:'99999-999'" value="#{cadastrarClienteController.cliente.endereco.cep}" required="true" label="#{labels['meproteja.cadastro.cliente.ativacao.endereco.cep']}" 
								converter="cepConverter">
							<f:validateLength minimum="8" />
						</p:inputMask>
					</ec:field>
					
					<p:commandButton action="#{cadastrarClienteController.ativarCliente}" value="#{labels['botao.cadastrar']}" update="@form" />
	            </p:panel>
	        </div>
        </h:form>
    </ui:define>

</ui:composition>